<template>
	<div class="dashboard-container">
		<el-card class="box-card">
			<!-- <div class="action-view mb20">
        <div>用户列表</div>
      </div> -->
			<div style="margin-bottom: 15px">用户模块</div>
			<el-button style="margin-bottom: 15px" type="primary">添加</el-button>
			<div class="table-view mb20">
				<el-table :data="addList" border>
					<el-table-column label="#" prop="role_id" width="100" type="index" />
					<el-table-column label="用户名" prop="username" />
					<el-table-column label="头像" width="150" align="center">
						<template v-slot="{ row }">
							<el-image
								style="width: 100px; height: 100px"
								:src="url"
								:zoom-rate="1.2"
								:preview-src-list="srcList"
								:initial-index="4"
								fit="cover"
							/>
						</template>
					</el-table-column>
					<el-table-column label="性别" prop="sex" />
					<el-table-column label="个性签名" prop="sign" />
					<el-table-column label="电话号码" prop="number" />
					<el-table-column label="操作" width="200">
						<template v-slot="{ row }">
							<el-button type="text">编辑</el-button>
							<el-button type="text">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页区域 默认分页10条一页-->
			<div class="page-view fc"></div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	const addList = [
		{ username: '小王', sex: '男', sign: '我們都是黑馬', number: 123456 },
		{ username: '小劉', sex: '男', sign: '酷得像風,野的像狗,春風十里,乾淨自由', number: 888888 },
		{ username: '小luo', sex: '男', sign: '我們都是黑馬', number: 4555 },
	]
	const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
	// export default {
	// 	data() {
	// 		return {
	// 			contentList: [],
	// 		}
	// 	},
	// 	mounted() {},
	// }
</script>

<style lang="sass" scoped></style>
